<template>
  <div class="container">
    <el-card class="box-card">
      <template #header>
        <div class="header">
          <span>系统基本配置</span>
          <!--<el-button type="text">操作按钮</el-button>-->
        </div>
      </template>

      <!-- Form Data -->
      <el-form ref="refForm" :model="state.form"
        label-width="180px"
        autocomplete="off">
        <el-form-item v-for="(item,index) in state.form" :label="item.title">
          <el-input v-if="item.type === 'text'" v-model.trim="item.value" :style="{
            width: '420px'
          }"/>

          <div v-if="item.type === 'image'">
            <el-upload class="upload-demo" ref="refUpload"
              accept="jpg,jpeg,png"
              :action="uploadServer"
              :headers="{ Authorization: local.get('ADMIN.TOKEN') || '' }"
              :on-success="(response, file) => uploadSuccess(response, file, index)"
              :on-error="uploadError"
              :show-file-list="false">
              <img v-if="item.value" :src="item.value"
                class="avatar"
                style="width: 300px; height: 210px; border: 1px solid #e9e9e9; border-radius: 10px"
                :alt="item.value">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              <template #tip>
                <div class="el-upload__tip">
                  请上传后缀格式为
                  <el-tag type="danger" size="small">jpg</el-tag>
                  /
                  <el-tag type="danger" size="small">jpeg</el-tag>
                  /
                  <el-tag type="danger" size="small">png</el-tag>
                  的图片
                </div>
              </template>
            </el-upload>
          </div>

          <div v-if="item.type==='radio'">
            <el-tooltip :content="(item.value === 1 ? '已开启' : '已关闭') + '验证码'" placement="top">
              <el-switch v-model="item.value" active-value="1" inactive-value="0"></el-switch>
            </el-tooltip>
          </div>

        </el-form-item>
        <el-button type="primary" @click="submit">保存</el-button>
      </el-form>

    </el-card>
  </div>
</template>

<script setup>
import { uploadServer } from "../../utils";
import { local } from "../../utils/storage";
import { onMounted, reactive } from "vue";
import { AdminConfigGet, AdminConfigPost } from "../../api/server/config";
import { ElMessage } from "element-plus";
import { AdminSettingsInfo } from "../../api/server/login";

const state = reactive({
  form: {}
})

onMounted(() => {
  getConfigInfo()
})

const getConfigInfo = () => {
  AdminConfigGet({ group: 'basic' }).then(({ data: { info } }) => {
    state.form = info
  })
}

// 文件上传成功回调
const uploadSuccess = ({ code, msg, data }, file, index) => {
  if (code === 200) {
    state.form[index].value = data || ''
  } else {
    ElMessage.error('Upload failed: ' + msg)
  }
}

// 文件上传失败回调
const uploadError = (e, file) => {
  ElMessage.error('Upload failed: ' + e.msg)
}

const submit = () => {
  AdminConfigPost(state.form).then(() => {
    ElMessage.success('配置信息已更新')
    AdminSettingsInfo().then(e => {
      local.set('ADMIN.SITE', e)
      window.location.reload()
    })
  })
}
</script>

<style scoped>
.container {
  padding: 0 20px;
}

.header span {
  color: rgb(82, 171, 173);
}

.el-button--primary {
  margin-left: 180px;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.el-upload__tip {
  font-weight: 600 !important;
  color: #e6a23c;
}
</style>
